<template>
	<!-- 活动信息 -->
	<view class="e-flex e-m-b-16 e-flex-wrap e-m-t-12" v-if="goodsInfo">
		<!-- 限购 -->
		<view class="activity-box e-flex e-font-20 e-m-r-10 e-m-b-10"
			:style="{color: AppSkin.primary, borderColor: AppSkin.primary}" v-if="goodsInfo.limit">
			<view class="activity-title" :style="{borderColor: AppSkin.primary, background:activitytitleBg}">
				{{$t('classify.限')}}
			</view>
			<view class="e-p-l-6">
				{{goodsInfo.limit}}
			</view>
		</view>
		<!-- 会员折扣 -->
		<view class="activity-box e-flex e-font-20 e-m-r-10 e-m-b-10"
			:style="{color: AppSkin.primary, borderColor: AppSkin.primary}" v-if="goodsInfo.discount">
			<view class="activity-title" :style="{borderColor: AppSkin.primary, background:activitytitleBg}">
				{{$t('classify.折')}}
			</view>
			<view class="e-p-l-6">
				{{goodsInfo.discount}}
			</view>
		</view>
		<!-- 抵扣 -->
		<view class="activity-box e-flex e-font-20 e-m-r-10 e-m-b-10"
			:style="{color: AppSkin.primary, borderColor: AppSkin.primary}" v-if="goodsInfo.deduction">
			<view class="activity-title" :style="{borderColor: AppSkin.primary, background:activitytitleBg}">
				{{$t('classify.抵')}}
			</view>
			<view class="e-p-l-6">
				{{goodsInfo.deduction}}
			</view>
		</view>
		
		<!-- 限时价 -->
		<view class="activity-box e-flex e-font-20  e-m-b-10"
			:style="{color: AppSkin.primary, borderColor: AppSkin.primary}" v-if="goodsInfo.flashSale">
			<view class="e-p-l-6">
				{{goodsInfo.flashSale}}
			</view>
		</view>
		<!-- 优惠券 -->
		<view class="activity-box e-flex e-font-20 e-m-r-10 e-m-b-10"
			:style="{color: AppSkin.primary, borderColor: AppSkin.primary}" v-if="coupon">
			
			<view class="activity-title" :style="{borderColor: AppSkin.primary, background:activitytitleBg}">
				{{$t('classify.券')}}
			</view>
			<view class="e-p-l-6">
				{{coupon.name}}
			</view>
		</view>
		<!-- 闪送 -->
		<view class="activity-box e-flex e-font-20 e-m-r-10 e-m-b-10" v-if="info?.distributionType === 1"
			:style="{color: AppSkin.primary, borderColor: AppSkin.primary}">
			<view class="e-p-l-6">
				{{$t('classify.闪送')}}
			</view>
		</view>
		<!-- 配送 -->
		<view class="activity-box e-flex e-font-20 e-m-r-10 e-m-b-10" v-if="info?.distributionType === 2"
			:style="{color: AppSkin.primary, borderColor: AppSkin.primary}">
			<view class="e-p-l-6">
				{{$t('classify.配送')}}
			</view>
		</view>

		<!-- 赠送 -->
		<!-- #ifdef MP-WEIXIN||MP-ALIPAY -->
	<!-- 	<block class="" v-if="give">
			<view class="activity-box e-flex e-font-20 e-m-r-10 e-m-b-10"
				:style="{color: AppSkin.primary, borderColor: AppSkin.primary}" v-for="(item, index) in give"
				:key="index">
				<view class="e-p-l-6">
					{{item.name}}
				</view>
			</view>
		</block> -->
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN||MP-ALIPAY -->
	<!-- 	<template class="" v-if="give">
			<view class="activity-box e-flex e-font-20 e-m-r-10 e-m-b-10"
				:style="{color: AppSkin.primary, borderColor: AppSkin.primary}" v-for="(item, index) in give"
				:key="index">
				<view class="e-p-l-6">
					{{item.name}}
				</view>
			</view>
		</template> -->
		<!-- #endif -->
	</view>
	<view class="" v-else>
		<view class="activity-box1 e-flex e-font-20 e-m-r-10 e-m-b-10" v-if="info && info.isFlash === 1"
			:style="{color: AppSkin.primary, borderColor: AppSkin.primary}">
			<view class="e-p-l-6">
				{{$t('classify.闪送')}}
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { computed } from 'vue'
	import type { GoodsItem } from '@/common/request/api'
	import { useInit } from '@/common/stores'
	import { storeToRefs } from 'pinia'

	const props = defineProps<{
		info ?: GoodsItem
	}>()

	const { AppSkin } = storeToRefs(useInit())
	const goodsInfo = computed(() => props.info?.activity || undefined)
	const coupon = computed<{ name : string } | undefined>(() => {
		if (goodsInfo.value?.coupon) {
			return JSON.parse(goodsInfo.value.coupon)
		}
		return undefined
	})
	const give = computed<{ name : string }[] | undefined>(() => {
		if (goodsInfo.value?.give) {
			return JSON.parse(goodsInfo.value.give)
		}
		return undefined
	})
	const activitytitleBg = computed(() => AppSkin.value.primary?.replace('1)', '0.1)'))
</script>

<style lang="scss" scoped>
	.activity-box1 {
		display: inline-block;
		border-radius: 6rpx;
		border: 1px solid;
		padding: 2rpx 10rpx 0 0;
	}

	.activity-box {
		border-radius: 6rpx;
		border: 1px solid;
		padding: 2rpx 10rpx 0 0;
	}

	.activity-title {
		border-right: 1px solid;
		padding: 2rpx 6rpx;
	}
</style>